import React, { Component } from 'react';
import classnames from 'classnames';
import { DragDecorator, DropDecorator } from '../decorator';
import './Block.less';

@DragDecorator()
@DropDecorator()
class Block extends Component {
  render() {
    const { children, isSelected, attributes } = this.props;
    const { connectDragSource, connectDropTarget, isDragging } = this.props;
    const className = classnames('mobile-block', { selected: isSelected });
    const style = isDragging ? { visibility: 'hidden' } : {};
    const content = connectDragSource(
      <div {...attributes} className={className} style={style}>
        {children}
      </div>
    );
    if (isDragging) {
      return content;
    }
    return connectDropTarget(content);
  }
}

export default Block;
